<template>
  <div class="edit">
    <headnavbar>
      <template #left>
        <router-link to="/Community">
          <span class="icon"></span>
          <div class="back">返回</div>
        </router-link>
      </template>
      <template #center>
        <router-link to="/edit">
          <div class="sub">发布帖子</div>
        </router-link>
      </template>
      <template #right>
        <div class="submit" @click="sind()">发帖</div>
      </template>
    </headnavbar>

    <!-- 标题 -->
    <textarea
      class="title"
      placeholder="标题（60字以内）"
      name="textarea"
      rows="2"
      @keyup.enter="check()"
      maxlength="60"
      required
      ref="title"
    ></textarea>

    <!-- 输入内容 -->
    <textarea class="text" ref="content" rows="4" placeholder="这一刻的想法...">
    </textarea>
    <div class="imgsBox">
      <vue-upload-imgs
        multiple
        compress
        :before-read="beforeRead"
        :after-read="afterRead"
        :before-remove="beforeRemove"
        :limit="limit"
        :type="type"
        label="Jine"
        @exceed="exceed"
        @oversize="oversize"
        v-model="files"
        ref="imag"
      >
      </vue-upload-imgs>
      <div class="preview-bg" v-show="isPreview">
        <div class="dialog">
          <img :src="previewIMG" class="preview-img" />
        </div>
      </div>
    </div>

    <!-- 图片表情盒子 -->
    <div class="box">
      <span class="expression" @click="check"></span>
    </div>
  </div>
</template>

<script>
import headnavbar from "../../../components/HeadNavBar";
import http from "../../../API/http.js";
export default {
  data() {
    return {
      files: [],
      maxSize: 1024 * 10, // 10 KB
      previewIMG: null,
      limit: 3,
      isPreview: false,
      type: 2 // 0 预览模式 1 列表模式 2 预览模式 + 上传按钮
    };
  },
  components: {
    headnavbar
  },
  methods: {
    cl() {
      alert("dddd");
    },
    check() {
      console.log("enter");
    },
    async sind() {
      let title = this.$refs.title.value;
      let content = this.$refs.content.value;
      let uid = window.localStorage.ID;
      let imgs = this.$refs.imag.files;
      let img = [];
      for (let i = 0; i < imgs.length; i++) {
        img.push(imgs[i].url);
      }
      if (title == "" && content == "") {
        alert("你输入的标题或内容不能为空！");
      } else {
        const { data } = await http._create({ uid, title, content, img });
        // const { file } = await http._upload(file);
        this.$router.push("/Community");
      }
    },

    // 图片大小超过 max-size 时触发
    oversize(file) {
      console.log("oversize");
      console.log("filesize:" + file.size / 1024 + "KB");
    },

    // 读文件后的函数
    afterRead(file) {
      console.log("after-read");
      console.log(file);
    },

    // 移除文件前的函数
    beforeRemove(index, file) {
      console.log(index, file);
      return true;
    },

    // 点击图片上的 + 号
    preview(index, file) {
      this.previewIMG = file.url;
      this.isPreview = true;
    },

    // 图片超出限制个数时触发
    exceed() {
      alert(`只能上传${this.limit}张图片`);
    },

    // 读文件前函数
    beforeRead(files) {
      console.log("before-read");
      for (let i = 0, len = files.length; i < len; i++) {
        const file = files[i];
        if (file.type != "image/jpeg" && file.type != "image/png") {
          alert("只能上传jpg和png格式的图片");
          return false;
        }
      }
      return true;
    },

    // 关闭按钮
    closePreview() {
      this.isPreview = false;
    }
    // sockets: {
    //   receiveMsg(data) {
    //     console.log(data);
    //     let datas = this.$store.state.userinfo.userList;
    //     // console.log(datas);
    //     var flag = true;
    //     if (datas.length === 0) {
    //       this.$store.commit("setuserList", data);
    //     } else {
    //       for (let i = 0; i < datas.length; i++) {
    //         // console.log(datas[i]);
    //         if (datas[i].id === data.id) {
    //           datas[i].content = data.content;
    //           console.log("第二次发");
    //           flag = false;
    //           break;
    //         }
    //       }
    //       if (flag === true) {
    //         this.$store.commit("setuserList", data);
    //         console.log("第一次发");
    //       }
    //     }
    //   }
    // }
  },
  sockets: {
    receiveMsg(data) {
      console.log(data);
      let datas = this.$store.state.userinfo.userList;
      // console.log(datas);
      var flag = true;
      if (datas.length === 0) {
        this.$store.commit("setuserList", data);
      } else {
        for (let i = 0; i < datas.length; i++) {
          // console.log(datas[i]);
          if (datas[i].userid === data.userid) {
            datas[i].content = data.content;
            // console.log("第二次发");
            flag = false;
            break;
          }
        }
        if (flag === true) {
          this.$store.commit("setuserList", data);
          // console.log("第一次发");
        }
      }
    }
  }
};
</script>

<style scoped>
.edit {
  overflow: hidden;
}

a {
  color: #ffffff !important;
  font-family: "Microsoft YaHei";
  font-size: 16px;
}

.icon {
  width: 22px;
  height: 22px;
  display: block;
  background: url(../imgs/返回.png);
  color: red;
  float: left;
}

.back {
  float: left;
}

.title {
  width: 100%;
  padding: 8px;
  outline-style: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px #cccccc solid;
}

.text {
  width: 100%;
  border: none;
  outline: none;
  margin-left: 5px;
  /* border-bottom: 1px #cccccc solid; */
}

.imgsBox {
  position: relative;
  width: 100%;
  height: 100px;
  /* background: red; */
  overflow: hidden;
}

.box {
  width: 100px;
  position: absolute;
  bottom: 0px;
  display: flex;
}

.picture,
.expression {
  width: 28px;
  height: 28px;
  display: block;
  margin-left: 10px;
}

/* 保留渗透选择器，不要删除 */
>>> .upload-label-upload {
  display: none;
}
>>> .icon-icon-test {
}

>>> .upload-div-add-img,
>>> .upload-div-img {
  border: 2px dashed #888;
}

>>> .upload-main {
  position: absolute;
  left: -30%;
}

.vue-upload-imgs {
  transform: scale(0.6);
  position: absolute;
  width: 100%;
}

.file {
  width: 100%;
  opacity: 0;
  cursor: pointer;
  filter: alpha(opacity=0);
}

.expression {
  background: url(../imgs/表情1.jpg) no-repeat;
  background-size: cover;
}

.imgBox {
  position: absolute;
  transform: scale(0.5);
  top: 160px;
  left: 10px;
}
</style>
